<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<title>系统登录</title>
	<%@ include file="/WEB-INF/component/commonCSS.jsp" %>
	<style type="text/css">
		html, body {
			width: 100%;
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
			background-color: #ecf0f5;
		}
		div.bgPanel {
			width: 100%;
			height: 100%;
			z-index: 10px;
		}
		div.dialogDiv {
			min-width: 348px;
			min-height: 402px;
			overflow: auto;
		}
		table.bgTable {
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			position: absolute;
			vertical-align: middle;
			text-align: center;
			border-collapse: collapse;
		}
		div.backBg {
			width:1105px;
			height: 295px;
			margin: auto;
			padding: 0px;
			position: relative;
			
		}
		div.backDialog {
			width:348px;
			height: 402px;
			margin: 20px 200px 0px 0px;
			padding: 0px;
			position: relative;
			background: url("${ctx}/lib/img/login_dialog.jpg") no-repeat;
		}
		div.loginLabel {
			position: absolute;
			left: 30px;
			top: 20px;
			font-family: "黑体";
			color: #00587d;
			font-size: 22px;
		}
		h1.title {
			margin: auto;
			padding: 0px;
			text-align: left;
			font-family: "黑体";
			font-size: 40px;
			position: relative;
			margin-top: -30px;
			margin-bottom: 10px;
			width: 1105px;
		}
		div.errorTips {
			position: absolute;
			left: 130px;
			top: 28px;
			overflow: hidden;
			color: red;
			font-size: 14px;
		}
		input.username {
			position: absolute;
			left: 67px;
			top: 67px;
			width: 255px;
			height: 35px;
		}
		input.password {
			position: absolute;
			left: 67px;
			top: 131px;
			width: 255px;
			height: 35px;
		}
		input.answer {
			position: absolute;
			left: 67px;
			top: 195px;
			width: 127px;
			height: 35px;
		}
		img.captchaImg {
			position: absolute;
			left: 200px;
			top: 195px;
			width: 120px;
			height: 35px;
			cursor: pointer;
		}
		button.submit {
			position: absolute;
			left: 30px;
			top: 280px;
			width: 136px;
			height: 33px;
			cursor: pointer;
			font-size: 14px;
		}
		button.reset {
			position: absolute;
			left: 185px;
			top: 280px;
			width: 136px;
			height: 33px;
			cursor: pointer;
			font-size: 14px;
		}
		div.regBar {
			position: absolute;
			left: 30px;
			top: 250px;
			width: 290px;
			text-align: left;
		}
		div.regBar * {
			display: inline-block;
			vertical-align: middle;
			margin: 0px;
			padding: 0px;
			font-family: "宋体";
			font-size: 12px;
			font-weight: normal !important;
		}
		a.reg {
			float: right;
		}
		div.footDiv {
		    font-family:Arial;
			font-size: 11px;
			position: absolute;
			width: 100%;
			text-align: center;
			bottom: 0px;
			height: 30px;
			line-height: 30px;
			left: 0px;
			z-index: 0px;
		}
		input.username, input.password, input.answer {
			border: 1px solid #BDD1D0 !important;
			background-color: white !important;
			padding-left: 10px !important;
			outline: none !important;
		}
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 1000px white inset;
		}
	</style>
</head>
<body>

	<div class="bgPanel">
		<table class="bgTable">
			<tr>
				<td>
					<h1 class="title"><c:out value="一生平安健康管理系统"></c:out></h1>
					<div class="backBg"></div>
				</td>
			</tr>
		</table>
	</div>
	
	<div class="bgPanel dialogDiv">
		<table class="bgTable">
			<tr>
				<td align="right">
					<div id="backDialog" class="backDialog">
						<div class="loginLabel">用户登录</div>
						<div class='errorTips ${ errorMsg != null and errorMsg != "" ? "fa fa-minus-circle" : "" }'>  ${ errorMsg }</div>
						<form id="form" method="post" action="${ctx}/loginAuth.html" >
							<input class="username" type="text" id="username" name="username" value="" />
							<input class="password" type="password" id="password" name="password" value="" />
							<input class="answer" type="text" id="answer" name="answer" />
							<img class="captchaImg" id="captchaImg" src="${ctx}/captchaImg" onclick="refreshImg()" />
							<%--<div class="regBar">
								<input type="checkbox" id="autoLogin" /> <label for="autoLogin">自动登录</label>
								<a href="${ctx}/regUser/toUserRegister.html" class="reg">立即注册</a>
							</div>--%>
							<button type="button" class="btn btn-primary btn-sm submit" onclick="submitForm()">登  录</button>
							<button type="button" class="btn btn-danger btn-sm reset" onclick="resetForm()">重  置</button>
						</form>
					</div>
				</td>
			</tr>
		</table>
	</div>
	
	<div class="footDiv"><c:out value=""></c:out></div>
	
	<%@ include file="/WEB-INF/component/commonJS.jsp" %>
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			$(document).keydown(function(event){
				if (event.keyCode == 13){
					submitForm();
				}
			});
			
		});
	
		function resetForm() {
			$("#username").val("");
			$("#password").val("");
			$("#answer").val("");
		}
		
		function submitForm() {
			$("#form").submit();
		}
		
		function refreshImg() {
			$("#captchaImg").attr("src", "${ctx}/captchaImg?time="+new Date().getTime());
		}
	</script>
	
</body>
</html>